<template>
    <div class="contract_main">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">销售机会</h1>
                <span>/ 推进客户销售工作进程</span>
            </el-col>
        </el-row>
        <el-row class="nav">
            <el-col>
                <div class="nav-item nav_but">
                    <el-button type="text" @click="saveOppoDialogVisible = true" style="color: #333333">
                        <i class="iconfont icon-qianbi icon-sty"></i>新增
                    </el-button>
                </div>
                <div class="nav-item">
                    <el-button type="text" @click="seeProOfferDialogVisible = true" style="color: #333333">
                        <i class="iconfont icon-biaodan icon-sty"></i>
                        报价产品需求表
                    </el-button>
                </div>
                <div class="nav-item">
                    <download-excel :data="allOpportunity" :fields="excelFields" name="机会列表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel">导出Excel</i>
                        </el-button>
                    </download-excel>
                </div>
                <el-form style="display:inline-block">
                    <div class="nav-item" style="border:none">
                        <el-select v-model="selectSearch" @change="search = ''">
                            <el-option
                                    v-for="item in selectSearchs"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    style="font-size: 1px"></el-option>
                        </el-select>
<!--                        <el-input size="mini" v-model="search"></el-input>-->
                    </div>
                    <div class="nav-item" style="border:none">
                        <el-input v-if="selectSearch === 1 || selectSearch === 2" v-model="search"></el-input>
                        <el-date-picker value-format="yyyy-MM-dd" style="width:180px" v-model="search" v-if="selectSearch === 3"></el-date-picker>
                    </div>
                    <div style="display:inline-block">
                        <el-button @click="searchOppo">搜索</el-button>
                    </div>
                </el-form>
            </el-col>
        </el-row>
        <div class="content" v-loading="oppoloading">
            <!-- tabs导航 -->
            <el-tabs v-model="activeName" type="border-card" @tab-click="change_tab">
                <!--销售机会的全部数据-->
                <el-tab-pane label="全部" name="first" state="0">
                    <!--表格-->
                    <oppo-table ref="header" :oppoList="oppoList" :oppostates="oppoStates"></oppo-table>
                </el-tab-pane>
                <el-tab-pane v-for="index in oppoStates" :key="index.oppoStateId" :label="index.oppoStateName" :name="index.oppoStateId+''" :state="index.oppoStateId">
                    <oppo-table ref="header" :oppoList="oppoList" :oppostates="oppoStates"></oppo-table>
                </el-tab-pane>
                <!--分页-->
                <div class="block" style="margin-top:10px">
                    <el-pagination
                        background
                        :current-page.sync="currpage"
                        :page-size="pagesize"
                        @current-change="changge_page"
                        layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </el-tabs>
        </div>
<!--        右边出来抽屉-->
        <el-drawer
                title="drawertitle"
                :visible.sync="drawer"
                :direction="direction"
                :with-header="false"
                class="drawer-input">
            <oppo-drawer :oppotunity="oppotunity"></oppo-drawer>
        </el-drawer>
<!--        添加详细行动记录的表单-->
        <el-dialog
                title="行动记录"
                :visible.sync="saveDetailRecordDialogVisible"
                width="60%"
                destroy-on-close>
            <add-actform></add-actform>
        </el-dialog>
        <!--添加或者修改销售机会的表单-->
        <el-dialog
                title="销售机会"
                :visible.sync="saveOppoDialogVisible"
                width="60%"
                destroy-on-close>
            <add-oppoform ref="refSaveOppo"></add-oppoform>
        </el-dialog>
        <!--查看报价产品需求表单-->
        <el-dialog
                title="报价产品需求表"
                :visible.sync="seeProOfferDialogVisible"
                width="90%"
                destroy-on-close>
            <pro-offer></pro-offer>
        </el-dialog>
    </div>
</template>

<script>
    import addOppoForm from "./add-oppoform.vue";
    import {formatTimeToStr} from "../../assets/format";
    export default {
        name: "Saleoppo",
        components: {
            // actrecForm,
            'oppo-table': resolve => require(["./oppo-table"],resolve),
            'oppo-drawer': resolve => require(["./oppo_drawer"],resolve),
            'add-actform': resolve => require(["./add-actform"],resolve),
            'add-oppoform':addOppoForm,
            'pro-offer':resolve => require(["./pro_offer"],resolve),
        },
        data: function() {
            return {
                oppoloading:true,   //taps导航标识
                activeName:"first",
                oppoStates:[],       //销售机会状态表,用于tabs导航的遍历
                state:0,            //销售机会状态
                oppoList:[],        //销售机会列表
                oppotunity:{},      //销售机会对象,用于在抽屉里修改
                oppoOffer:[],       //销售机会详情列表数据源
                drawer: false,
                //抽屉出现位置
                direction: 'rtl',
                //抽屉标题
                drawertitle:'',
                //详细联系内容的弹框
                saveDetailRecordDialogVisible:false,     //保存行动记录
                saveOppoDialogVisible:false,            //保存或修改销售机会
                seeProOfferDialogVisible:false,         //报价产品需求
                currpage:1,
                total:0,
                pagesize:5,
                search:'',          //模糊查询数据
                selectSearchs:[
                    { value: 1, label: '按客户名查询' },
                    { value: 2, label: '按机会名称查询' },
                    { value: 3, label: '按添加日期查询' },
                ],                      //模糊查询转换
                selectSearch:2,
                allOpportunity:[],      //非分页的导出所有Excel
                excelFields: {			// excel对应关系
                    "机会名称": "contractNum",
                    "客户": "customer.customerName",		// 支持嵌套属性
                    "业务员": "worker.empName",
                    "机会状态": "state.oppoStateName",
                    "添加时间": {
                        field: "stateDate",
                        callback: value => {		// 通过回调函数格式化日期
                            return formatTimeToStr(value, "yyyy-MM-dd")
                        }
                    },
                    "推进到当前时间": {
                        field: "nextContactTime",
                        callback: value => {
                            return formatTimeToStr(value, "yyyy-MM-dd")
                        }
                    },
                    "预计签约时间": {
                        field: "planIdealTime",
                        callback: value => {
                            return formatTimeToStr(value, "yyyy-MM-dd")
                        }
                    },
                    "机会产品": {
                        field: "oppoProList",
                        callback: value => {
                            let product = ""
                            value.forEach(pl => {
                                let p = pl.productDetail.product.productName
                                pl.productDetail.abilities.forEach(ab => {
                                    p += " " + ab.abilityName
                                })
                                product += p + " | "
                            })
                            return product.substring(0, product.length - 1)
                        }
                    },
                }
            };
        },
        methods: {
            /*获取销售机会状态列表*/
            get_oppoState(){
                this.axios.get("api/oppo-sale/oppoStates")
                    .then(v=>{
                        this.oppoStates = v.data
                        this.get_oppotunities(this.currpage,0,this.search,this.selectSearch)
                    })
                    .catch(() => {
                        this.oppoloading = false
                        this.global.mes_error("获取数据失败！")
                    })
            },

            get_oppotunities(currpage,state,search,selectSearch){
                this.axios.get("api/oppo-sale/sale-oppo",{params:{"currPage":currpage,"pageSize":this.pagesize,"state":state,"search":search,"searchBy":selectSearch,"customerId":0}})
                    .then(v=>{
                        this.oppoList = v.data.data;
                        this.total = v.data.total;
                        // window.console.log(this.oppoList)
                        this.oppoloading = false
                    })
                    .catch(() => {
                        this.oppoloading = false
                        this.global.mes_error("获取数据失败！")
                    })
            },
            /* 获取全部机会数据，用于导出excel */
            get_all_opportunity(){
                this.axios.get("api/oppo-sale/oppoNoPage")
                    .then(res => {
                        window.console.log(res.data)
                        this.allOpportunity = res.data
                    })
                    .catch(() => {
                        this.global.mes_error("获取数据失败！")
                    })
            },
            /* tabs导航改变事件 */
            change_tab(tab){
                this.state = tab.$attrs.state   //记录状态，分页时候
                this.get_oppotunities(this.currpage,tab.$attrs.state,this.search,this.selectSearch)
            },
            /* 分页页码改变事件 */
            changge_page(){
                // this.get_oppotunities(currpage, this.state,this.search);
                this.get_oppotunities(this.currpage,this.state,this.search,this.selectSearch)
            },
            searchOppo(){
                // this.get_oppotunities(currpage, this.state,this.search);
                this.get_oppotunities(this.currpage,this.state,this.search,this.selectSearch)
            },
        },
        created:function() {
            this.get_oppoState();
            this.get_all_opportunity();
            /*初始化后，保存当前页面对象*/
            this.$store.dispatch("setVueOppotunity",this)
        },
    };
</script>

<style scoped>
    *{margin: 0;padding: 0;font-size: 14px}
    .contract_main{background: #e4e7ee}
    .head{height:70px;background: #f8f6f8;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;padding-right: 3px;font-size: 25px}
    .el-col span{color: #b4b4bc}
    .nav {margin: 20px;background: #fcfbfd;width: 100%-40px;height:auto; min-height:55px !important;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .nav .nav-item {display: inline-block;height: 45px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 45px;}
    .content{margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .el-table{font-size: 5px !important;}
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}
    .el-tabs__header{margin-bottom: 0px !important;}
</style>